<template>
  <div class="result_wrap">
    <div class="result_header">
    <router-link to="/home">
      <img src="/qxqstatic/logo.jpg" class="logo" />
    </router-link>
      <div class="search_bar">
        <SearchBar :kw="kw" />
      </div>
      <div class="open">打开APP</div>
    </div>
    <div class="result_info">
      <van-tabs
        v-model:active="active"
        color="#f06742"
        line-width="16"
        class="menu_tabs"
      >
        <van-tab title="全部">
          <div class="van_container">
          <div class="result_container">
            <div class="result_user">
              <div class="user_bar">
                <div class="left">'{{ kw }}' 相关的主播</div>
                <div class="right">更多 ></div>
              </div>
              <div class="user_list_container">
                <div class="user_list">
                  <div
                    class="user_item"
                    v-for="user in searchResult.data.userViews.users"
                  >
                    <img class="avatar" :src="user.userInfo.smallPic" />
                    <div class="user_info">
                      <div class="name">{{ user.userInfo.nickname }}</div>
                      <div class="count">
                        <img class="yonghu" src="/qxqstatic/yonghu.png" />
                        {{ turnString(String(user.userInfo.followers_counts)) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="result_album">
              <div class="album_bar">
                <div class="left">'{{ kw }}' 相关的专辑</div>
                <div class="right">更多 ></div>
              </div>
              <div class="album_list">
                <div
                  class="album_item"
                  v-for="user in searchResult.data.albumViews.albums"
                >
                  <img :src="user.albumInfo.cover_path" class="avatar" />
                  <div class="album_info">
                    <div class="title">{{ user.albumInfo.title }}</div>
                    <div class="album_desc">
                      {{
                        user.albumInfo.recommend_reason || user.albumInfo.intro
                      }}
                    </div>
                    <div class="ablum_tag_list">
                      <div class="album_tag">
                        <img src="/qxqstatic/yonghu.png" />{{
                          user.albumInfo.nickname
                        }}
                      </div>
                      <div class="album_tag">
                        <img src="/qxqstatic/yinpin.png" />{{
                          user.albumInfo.tracks
                        }}
                      </div>
                      <div class="album_tag">
                        <img src="/qxqstatic/erji.png" />{{
                          turnString(String(user.albumInfo.play))
                        }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="result_track">
              <div class="track_bar">
                <div class="left">'{{ kw }}' 相关的声音</div>
                <div class="right">更多 ></div>
              </div>
              <div class="track_list">
                <div
                  class="track_item"
                  v-for="track in searchResult.data.trackViews.tracks"
                >
                  <img src="/qxqstatic/bofang.png" class="bofang" />
                  <div class="track_info">
                    <div class="title">{{ track.trackInfo.title }}</div>
                    <div class="track_tag_list">
                      <div class="track_tag">
                        <img src="/qxqstatic/yonghu.png" />{{
                          track.trackInfo.nickname
                        }}
                      </div>
                      <div class="track_tag">
                        <img src="/qxqstatic/shizhong.png" />{{
                          turnTime(track.trackInfo.duration)
                        }}
                      </div>
                      <div class="track_tag">
                        <img src="/qxqstatic/erji.png" />{{
                          turnString(String(track.trackInfo.count_play))
                        }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div></div>
        </van-tab>
        <van-tab title="专辑">
          <div class="van_container">
          <div class="album_list">
            <div
              class="album_item"
              v-for="user in searchResult.data.albumViews.albums"
            >
              <img :src="user.albumInfo.cover_path" class="avatar" />
              <div class="album_info">
                <div class="title">{{ user.albumInfo.title }}</div>
                <div class="album_desc">
                  {{ user.albumInfo.recommend_reason || user.albumInfo.intro }}
                </div>
                <div class="ablum_tag_list">
                  <div class="album_tag">
                    <img src="/qxqstatic/yonghu.png" />{{
                      user.albumInfo.nickname
                    }}
                  </div>
                  <div class="album_tag">
                    <img src="/qxqstatic/yinpin.png" />{{
                      user.albumInfo.tracks
                    }}
                  </div>
                  <div class="album_tag">
                    <img src="/qxqstatic/erji.png" />{{
                      turnString(String(user.albumInfo.play))
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div></div>
        </van-tab>
        <van-tab title="声音">
          <div class="van_container">
          <div class="track_list">
            <div
              class="track_item"
              v-for="track in searchResult.data.trackViews.tracks"
            >
              <img src="/qxqstatic/bofang.png" class="bofang" />
              <div class="track_info">
                <div class="title">{{ track.trackInfo.title }}</div>
                <div class="track_tag_list">
                  <div class="track_tag">
                    <img src="/qxqstatic/yonghu.png" />{{
                      track.trackInfo.nickname
                    }}
                  </div>
                  <div class="track_tag">
                    <img src="/qxqstatic/shizhong.png" />{{
                      turnTime(track.trackInfo.duration)
                    }}
                  </div>
                  <div class="track_tag">
                    <img src="/qxqstatic/erji.png" />{{
                      turnString(String(track.trackInfo.count_play))
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div></div>
        </van-tab>
        <van-tab title="主播">
          <div class="van_container">
            <div class="user_list" style="display:block">
                  <div
                    class="user_item"
                    style="padding:15px 0px"
                    v-for="user in searchResult.data.userViews.users"
                  >
                    <img class="avatar" :src="user.userInfo.smallPic" />
                    <div class="user_info">
                      <div class="name">{{ user.userInfo.nickname }}</div>
                      <div class="desc">{{ user.userInfo.personDescribe }}</div>
                      <div class="user_tag_list">
                      <div class="user_tag">
                        <img  src="/qxqstatic/dianshi.png" class="dianshi"/>
                        {{ turnString(String(user.userInfo.followings_counts)) }}
                      </div>
                      <div class="user_tag">
                        <img  src="/qxqstatic/yinpin.png" />
                        {{ turnString(String(user.userInfo.tracks_counts)) }}
                      </div>
                      <div class="user_tag">
                        <img  src="/qxqstatic/yonghu.png" />
                        {{ turnString(String(user.userInfo.followers_counts)) }}
                      </div>
                      </div>
                    </div></div>
                  </div>
                </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  name: "result",
});
</script>

<script setup lang="ts">
import SearchBar from "@/components/SearchBar/index.vue";
import { reqSearchResult } from "@/api/search";
import searchResult from "@/mock/search.js";

let kw = useRoute().query.kw;
const page = ref(1);
const rows = ref(6);

onMounted(() => {
  getSearchResult();
});

const getSearchResult = async () => {
  const res = await reqSearchResult(kw, page.value, rows.value);
  console.log(res);
};

const turnString = (str: string) => {
  if (str.length <= 4) {
    return str;
  } else if (str.length > 4 && str.length <= 8) {
    const _str = str.substring(0, str.length - 4);
    const str_ = str.substring(str.length - 4, str.length - 2);
    return _str + "." + str_ + "万";
  } else if (str.length > 8) {
    const _str = str.substring(0, str.length - 8);
    const str_ = str.substring(str.length - 8, str.length - 6);
    return _str + "." + str_ + "亿";
  }
};

const turnTime = (num: number) => {
  if (num < 60) {
    if (num < 10) {
      return "00:0" + num;
    } else {
      return "00:" + num;
    }
  } else {
    let minute = Math.floor(num / 60) as any;
    if (minute < 10) {
      minute = "0" + minute;
    } else {
      minute = "" + minute;
    }
    let second = (num % 60) as any;
    if (second < 10) {
      second = "0" + second;
    } else {
      second = "" + second;
    }
    return minute + ":" + second;
  }
};
</script>

<style scoped>
.van_container {
  padding: 0 20px;
}
.result_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px 5px;
}
.result_header .logo {
  width: 75px;
  height: 18px;
}
.result_header .search_bar {
  width: 185px;
}
.result_header .open {
  width: 70px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  color: #f66847;
  border: 1px solid #f66847;
  border-radius: 15px;
  font-weight: 600;
}
.user_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
.user_bar .left {
  font-size: 18px;
  color: #40404c;
}
.user_bar .right {
  font-size: 12px;
}
.menu_tabs ::v-deep .van-tab--active {
  color: #ff0b0b;
  font-size: 18px;
}
.user_list_container {
  width: 100%;
  overflow-x: scroll;
}
.user_list_container::-webkit-scrollbar {
  display: none;
}
.user_list {
  display: flex;
}
.user_item {
  height: 40px;
  margin-right: 30px;
  display: flex;
}
.user_item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user_item .yonghu {
  width: 12px;
  height: 12px;
}
.user_info .user_tag_list {
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.user_info .desc{
  font-size: 12px;
  color:#a3a3ac;
}
.user_tag_list .user_tag {
  color: #a3a3ac;
  font-size: 12px;
  margin-right: 20px;
  display: flex;
  white-space: nowrap;
}
.user_tag img {
  display: block;
  width: 12px;
  height: 12px;
  transform: translate(-3px, 2px);
}
.user_tag .dianshi{
  transform: translate(-3px,0px);
}
.user_info {
  font-size: 14px;
  color: #40404c;
  white-space: nowrap;
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-3px);
}
.user_info .name {
  display: flex;
  align-items: center;
  color: #a3a3ac;
}
.album_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
.album_bar .left {
  font-size: 18px;
  color: #40404c;
}
.album_bar .right {
  font-size: 12px;
}
.album_item {
  display: flex;
  padding: 15px 0px;
  border-bottom: 1px solid #f6f6f6;
}
.album_item .avatar {
  width: 70px;
  height: 70px;
  margin-right: 15px;
}
.album_info {
  transform: translateY(-5px);
}
.album_info .title {
  color: #333;
  font-size: 16px;
}
.album_info .album_desc {
  color: #999;
  font-size: 13px;
  margin: 5px 0px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.album_info .ablum_tag_list {
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.ablum_tag_list .album_tag {
  color: #a3a3ac;
  font-size: 12px;
  margin-right: 20px;
  display: flex;
  white-space: nowrap;
}
.album_tag img {
  display: block;
  width: 12px;
  height: 12px;
  transform: translate(-3px, 2px);
}
.album_tag:nth-child(2) img {
  transform: translate(-3px, 1px);
}
.track_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
.track_bar .left {
  font-size: 18px;
  color: #40404c;
}
.track_bar .right {
  font-size: 12px;
}
.track_item {
  height: 80px;
  display: flex;
  padding: 15px 0px;
  border-bottom: 1px solid #f6f6f6;
}
.track_item .bofang {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}
.track_info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: translateY(-10px);
}
.track_info .title {
  font-size: 16px;
  color: #40404c;
}
.track_info .track_tag_list {
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.track_tag_list .track_tag {
  color: #a3a3ac;
  display: flex;
  font-size: 12px;
  margin-right: 20px;
  white-space: nowrap;
}
.track_tag img {
  display: block;
  width: 12px;
  height: 12px;
  transform: translate(-3px, 2px);
}
.track_tag:nth-child(2) img {
  transform: translate(-3px, 1px);
}
</style>
